<template>
	<div class="app-container">
		<div class="content">
			<nextnav :navnum='navnum'></nextnav>
			<div class="oneconent oneconents">
				<!--<p>批次名称：</p>
				<el-input v-model="list.batchName" size="mini" class="nametext" placeholder="请输入批次名称"></el-input>
					-->
				<el-form :model="list" :rules="rules" ref="list">
					<el-form-item label="批次名称:" label-width="130px" prop="batchName">
						<el-input v-model="list.batchName" size="mini" class="nametext" placeholder="请输入批次名称"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<div class="oneconent">
				<p>保险公司：</p>
				<span>{{list.insuranceName}}</span>
			</div>
			<div class="oneconent">
				<p>适用工号：</p>
				<div class="worknum">
					<p v-for="item in list.staffNames">{{item.staffAccount}}</p>
				</div>
			</div>
			<div class="oneconent oneconents">
				<p>有效时间：</p>
				<span>
					{{list.effectiveDate}}
					<span>到</span>
				<span v-if="list.expiryDate">{{list.expiryDate}}</span>
				<span v-else>不限</span>

				</span>
			</div>
			<div class="oneconent">
				<p></p>
				<span class="pepeiout">
					以<span class="pipei">{{list.matchDateType}}</span>作为匹配日期类型
				</span>
			</div>
			<div class="oneconent">
				<p>是否设为奖励批次：</p>
				<span>
					{{list.isReward | changes}}
				</span>
			</div>
			<div class="btnnext">
				<button @click="prevpage">上一步</button>
				<button class="next" @click="nextpage('list')">下一步</button>
			</div>
		</div>
	</div>
</template>

<script>
	import Vue from 'vue'
	import nextnav from './assembly/nextnav'
	export default {
		data() {
			return {
				navnum: 1,
				batchId: "",
				list: {},
				inputtext: "",
				id: "",
				rules: {
					batchName: [{
						required: true,
						message: '请输入批次名称',
						trigger: 'blur'
					}],
				},
			}
		},
		mounted() {
			console.log(this.$route.query)
			this.batchId = this.$route.query.batchId
			this.getinter()
		},
		filters: {
			changes(val) {
				if(val == true) {
					return "是"
				} else {
					return "否"
				}
			}
		},
		methods: {
			prevpage() {
				this.$router.push({
					name: "policydownnew"
				})
			},
			nextpage(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						let arr = [];
						for(var i = 0; i < this.list.staffNames.length; i++) {
							arr.push(this.list.staffNames[i].staffId)
						}
						let json = {
							batchName: this.list.batchName,
							upperBatchID: this.batchId,
							staffId: arr,
							effectiveDate: this.list.effectiveDate,
							expiryDate: this.list.expiryDate
						}
						this.post(json, "services/app/policy/CreateLowerPolicyBatch").then(res => {
							console.log("success-111")
							console.log(res)
							this.$router.push({
								name:"policylower3",
								query:{
									batchId:res.result.batchId
								}
							})
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});

				//				if(this.list.batchName==""){
				//					this.$message({
				//			          message: '请输入批次名称',
				//			          type: 'warning'
				//			        });
				//				}else{
				//						let arr=[];
				//						for(var i=0;i<this.list.staffNames.length;i++){
				//							arr.push(this.list.staffNames[i].staffId)
				//						}
				//						let json={
				//							batchName:this.list.batchName,
				//							upperBatchID:this.batchId,
				//							staffId:arr,
				//							effectiveDate:this.list.effectiveDate,
				//							expiryDate:this.list.expiryDate
				//						}
				//						this.post(json, "services/app/policy/CreateLowerPolicyBatch").then(res => {
				//							console.log("success-111")
				//							console.log(res)
				//							this.$router.push({
				//								name:"policylower3",
				//								query:{
				//									batchId:res.result.batchId
				//								}
				//							})
				//					});
				//				}
			},
			getinter() {
				let params = {
					id: this.batchId
				};
				this.post(params, "services/app/policy/GetPolicyBatchBasic").then(res => {
					console.log(111)
					console.log(res)
					this.list = res.result
					this.list.batchName = ""
				});
			}
		},
		components: {
			nextnav
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 1005px;
		height: 100%;
		margin: 0 auto;
	}
	
	.oneconent {
		width: 100%;
		min-height: 28px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 13px;
		color: #333333;
		margin-bottom: 22px;
		p {
			width: 130px;
			height: 28px;
			text-align: right;
			line-height: 28px;
			margin: 0;
			font-size: 13px;
			color: #606266;
		}
		.nametext {
			margin-left: 12.5px;
			width: 396px;
			height: 28px;
			font-size: 13px;
			color: #CBCBCB;
		}
		span {
			margin-left: 12.5px;
			width: 396px;
			height: 28px;
			opacity: 0.9;
			line-height: 28px;
			color: black;
			.pipei {
				margin: 0;
				color: #1989FA;
			}
		}
		.pepeiout {
			color: #CBCBCB;
		}
		.worknum {
			width: 396px;
			min-height: 28px;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			margin-left: 12.5px;
			p {
				margin-left: 0;
				text-align: left;
				color: black;
			}
		}
	}
	
	.oneconents {
		margin-bottom: 0;
	}
	
	.btnnext {
		width: 100%;
		height: 32px;
		margin-top: 36px;
		margin-bottom: 30px;
		display: flex;
		justify-content: center;
		button {
			margin-right: 50px;
			width: 100px;
			height: 32px;
			background: #F7F7F7;
			border: 1px solid #DDDDDD;
			border-radius: 5px;
			font-size: 14px;
			color: #666666;
			outline: none;
		}
		.next {
			background: #FF7819;
			color: #FFFFFF;
		}
	}
	
	.nametext .el-form-item__error {
		left: 12.5px;
	}
</style>